import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';

class Modal extends React.Component {
    displayName = 'Modal';

    state = {
        visible: true,
        loading: false
    }

    componentDidMount () {
        let duration = this.props.data.duration;
        if (duration === undefined || duration === null) {
            duration = 4;
        }
        if (duration) {
            setTimeout(() => {
                this.close();
            }, duration * 1000);
        }
    }

    close = () => {
        this.setState({
            visible: false
        });
        this.props.onClose(this.props.data.key);
    }

    getIcon (type) {
        let icon = '';
        switch (type) {
            case 'info': {
                icon = 'info';
                break;
            }
            case 'success': {
                icon = 'check-circle';
                break;
            }
            case 'warning': {
                icon = 'alert-circle';
                break;
            }
            case 'error': {
                icon = 'x-circle';
                break;
            }
        }
        return icon;
    }

    getLoading () {
        const {size} = this.props;
        let iconSize = 14;
        if (size === 'small') {
            iconSize = 12;
        }
        return <span style={{width: iconSize, height: iconSize}} className='cm-message-loading'>
            <svg xmlns='http://www.w3.org/2000/svg' width={iconSize} height={iconSize} viewBox='0 0 38 38' stroke='currentcolor'>
                <g fill='none' fillRule='evenodd'>
                    <g transform='translate(1 1)' strokeWidth='2'>
                        <circle strokeOpacity='.5' cx='18' cy='18' r='18'/>
                        <path d='M36 18c0-9.94-8.06-18-18-18' transform='rotate(113.635 18 18)'>
                            <animateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/>
                        </path>
                    </g>
                </g>
            </svg>
        </span>;
    }

    render () {
        const {className, style, content, closeable, type, background, loading} = this.props.data;
        const clazzName = classNames('cm-message', className, {
            'cm-message-visible': this.state.visible,
            [`cm-message-${type}`]: type,
            'cm-message-background': background
        });

        const icon = this.getIcon(type);

        return <div className={clazzName} style={style} ref={f => this.wrap = f}>
            <div className='cm-message-inner'>
                {
                    loading ? this.getLoading() : <Icon name={icon} className='cm-message-icon' size={16}/>
                }
                <div className='cm-message-content'>
                    {content}
                </div>
                {
                    closeable ? <div className='cm-message-close'>
                        <Icon name='x' className='cm-message-close-icon' size={14} onClick={this.close}/>
                    </div> : null
                }
            </div>
        </div>;
    }
}

export default Modal;
